<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./login.css" />
    <title>用户注册</title>
  </head>
  <body>
    <form>
      <div class="login-box">
        <h1>注册</h1>
        <div class="alert-box" id="alert-box"></div>
        <div class="textbox">
          <i class="fas fa-user"></i>
          <input
            type="text"
            placeholder="用户名"
            id="user-name"
            autocomplete="off"
          />
        </div>

        <div class="textbox">
          <i class="fas fa-lock"></i>
          <input
            type="password"
            placeholder="密码"
            id="password"
            autocomplete="off"
          />
        </div>

        <div class="textbox">
          <i class="fas fa-check"></i>
          <input type="password" placeholder="确认密码" id="confirm" />
        </div>

        <input type="button" class="btn" id="btn" value="注册" />
        <small id="registered-tips">
          <a href="http://localhost:8080/graduation-project/login" class="tips"
            >返回登录页</a
          >
        </small>
      </div>
    </form>

    <!-- axios CDN -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      const userNameInput = document.getElementById('user-name');
      const passwordInput = document.getElementById('password');
      const confirmInput = document.getElementById('confirm');
      const btn = document.getElementById('btn');
      const alertBox = document.getElementById('alert-box');

      btn.addEventListener('click', function() {
        // console.log('点击事件通过');
        // 获取当前账号密码
        let userName = userNameInput.value;
        let password = passwordInput.value;
        let confirm = confirmInput.value;

        // 验证表单完整性
        if (userName == '' || password == '' || confirm == '') {
          // alert('请确认表单已填写完整');
          alertBox.setAttribute('class', 'alert-box danger');
          alertBox.style.visibility = 'visible';
          alertBox.innerHTML = '请确认表单已填写完整';
          return;
        }
        // 验证两次密码是否相同
        if (password != confirm) {
          // alert('两次输入的密码不一致');
          alertBox.setAttribute('class', 'alert-box danger');
          alertBox.style.visibility = 'visible';
          alertBox.innerHTML = '两次输入的密码不一致';
          return;
        }
        // console.log(userName);
        // console.log(password);

        // 客户端逻辑性验证通过，向服务器发起AJAX请求;
        axios
          .post('/graduation-project/registered-handle', {
            userName: userName,
            password: password
          })
          .then(function(response) {
            // console.log(response.request.response);
            if (response.request.response === '1') {
              // alert('注册成功');
              alertBox.setAttribute('class', 'alert-box success');
              alertBox.style.visibility = 'visible';
              alertBox.innerHTML = '注册成功';
              // 跳转至登录页
              location.href = 'http://localhost:8080/graduation-project/login';
            } else {
              // alert('服务器不稳定，请稍后再试');
              alertBox.setAttribute('class', 'alert-box danger');
              alertBox.style.visibility = 'visible';
              alertBox.innerHTML = '服务器不稳定，请稍后再试';
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      });
    </script>
  </body>
</html>
